<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input v-model="query.value" clearable placeholder="输入搜索内容" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <el-select v-model="query.type" clearable placeholder="类型" class="filter-item" style="width: 130px">
          <el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
        </el-select>
        <el-date-picker
          v-model="query.ordertime"
          :default-time="['00:00:00','23:59:59']"
          type="daterange"
          range-separator=":"
          size="small"
          class="date-item"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="ordertimeStart"
          end-placeholder="ordertimeEnd"
        />
        <el-date-picker
          v-model="query.paytime"
          :default-time="['00:00:00','23:59:59']"
          type="daterange"
          range-separator=":"
          size="small"
          class="date-item"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="paytimeStart"
          end-placeholder="paytimeEnd"
        />
        <el-date-picker
          v-model="query.refundtime"
          :default-time="['00:00:00','23:59:59']"
          type="daterange"
          range-separator=":"
          size="small"
          class="date-item"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="refundtimeStart"
          end-placeholder="refundtimeEnd"
        />
        <el-date-picker
          v-model="query.priceunit"
          :default-time="['00:00:00','23:59:59']"
          type="daterange"
          range-separator=":"
          size="small"
          class="date-item"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="priceunitStart"
          end-placeholder="priceunitEnd"
        />
        <el-date-picker
          v-model="query.priceofficial"
          :default-time="['00:00:00','23:59:59']"
          type="daterange"
          range-separator=":"
          size="small"
          class="date-item"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="priceofficialStart"
          end-placeholder="priceofficialEnd"
        />
        <el-date-picker
          v-model="query.pricegun"
          :default-time="['00:00:00','23:59:59']"
          type="daterange"
          range-separator=":"
          size="small"
          class="date-item"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="pricegunStart"
          end-placeholder="pricegunEnd"
        />
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="订单号">
            <el-input v-model="form.orderid" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="支付号">
            <el-input v-model="form.paysn" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="form.phone" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="订单生成时间, 时间格式2017-09-27 00:00:00">
            <el-input v-model="form.ordertime" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="支付时间, 时间格式2017-09-27 00:00:00">
            <el-input v-model="form.paytime" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="退款时间, 时间格式2017-09-27 00:00:00">
            <el-input v-model="form.refundtime" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="油站名称">
            <el-input v-model="form.gasname" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="省">
            <el-input v-model="form.province" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="市">
            <el-input v-model="form.city" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="县">
            <el-input v-model="form.county" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="枪号">
            <el-input v-model="form.gunno" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="油号">
            <el-input v-model="form.oilno" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="实付金额(单位:元)">
            <el-input v-model="form.amountpay" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="订单总金额(单位:元)">
            <el-input v-model="form.amountgun" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="优惠金额(单位:元)">
            <el-input v-model="form.amountdiscounts" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="订单状态">
            <el-input v-model="form.orderstatusname" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="优惠券金额(单位:元)">
            <el-input v-model="form.couponmoney" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="优惠券 Id">
            <el-input v-model="form.couponid" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="优惠券 Code">
            <el-input v-model="form.couponcode" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="升数">
            <el-input v-model="form.litre" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="支付方式">
            <el-input v-model="form.paytype" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="最终享受单价(单位:元)">
            <el-input v-model="form.priceunit" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="国标价(单位:元)">
            <el-input v-model="form.priceofficial" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="枪价 (单位:元)">
            <el-input v-model="form.pricegun" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="渠道编码,对接时团油提供">
            <el-input v-model="form.ordersource" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="需要生成二维码字段(此字段如果不为空则前端以二维码 形式展示)">
            <el-input v-model="form.qrcode4petrochina" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="大呷卡用户消费订单ID">
            <el-input v-model="form.consumerOrderId" style="width: 370px;" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column v-if="columns.visible('orderid')" prop="orderid" label="订单号" />
        <el-table-column v-if="columns.visible('paysn')" prop="paysn" label="支付号" />
        <el-table-column v-if="columns.visible('phone')" prop="phone" label="手机号" />
        <el-table-column v-if="columns.visible('ordertime')" prop="ordertime" label="订单生成时间, 时间格式2017-09-27 00:00:00" />
        <el-table-column v-if="columns.visible('paytime')" prop="paytime" label="支付时间, 时间格式2017-09-27 00:00:00" />
        <el-table-column v-if="columns.visible('refundtime')" prop="refundtime" label="退款时间, 时间格式2017-09-27 00:00:00" />
        <el-table-column v-if="columns.visible('gasname')" prop="gasname" label="油站名称" />
        <el-table-column v-if="columns.visible('province')" prop="province" label="省" />
        <el-table-column v-if="columns.visible('city')" prop="city" label="市" />
        <el-table-column v-if="columns.visible('county')" prop="county" label="县" />
        <el-table-column v-if="columns.visible('gunno')" prop="gunno" label="枪号" />
        <el-table-column v-if="columns.visible('oilno')" prop="oilno" label="油号" />
        <el-table-column v-if="columns.visible('amountpay')" prop="amountpay" label="实付金额(单位:元)" />
        <el-table-column v-if="columns.visible('amountgun')" prop="amountgun" label="订单总金额(单位:元)" />
        <el-table-column v-if="columns.visible('amountdiscounts')" prop="amountdiscounts" label="优惠金额(单位:元)" />
        <el-table-column v-if="columns.visible('orderstatusname')" prop="orderstatusname" label="订单状态" />
        <el-table-column v-if="columns.visible('couponmoney')" prop="couponmoney" label="优惠券金额(单位:元)" />
        <el-table-column v-if="columns.visible('couponid')" prop="couponid" label="优惠券 Id" />
        <el-table-column v-if="columns.visible('couponcode')" prop="couponcode" label="优惠券 Code" />
        <el-table-column v-if="columns.visible('litre')" prop="litre" label="升数" />
        <el-table-column v-if="columns.visible('paytype')" prop="paytype" label="支付方式" />
        <el-table-column v-if="columns.visible('priceunit')" prop="priceunit" label="最终享受单价(单位:元)" />
        <el-table-column v-if="columns.visible('priceofficial')" prop="priceofficial" label="国标价(单位:元)" />
        <el-table-column v-if="columns.visible('pricegun')" prop="pricegun" label="枪价 (单位:元)" />
        <el-table-column v-if="columns.visible('ordersource')" prop="ordersource" label="渠道编码,对接时团油提供" />
        <el-table-column v-if="columns.visible('qrcode4petrochina')" prop="qrcode4petrochina" label="需要生成二维码字段(此字段如果不为空则前端以二维码 形式展示)" />
        <el-table-column v-if="columns.visible('consumerOrderId')" prop="consumerOrderId" label="大呷卡用户消费订单ID" />
        <el-table-column v-permission="['admin','oilTuanyouOrder:edit','oilTuanyouOrder:del']" label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
            />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudOilTuanyouOrder from '@/api/oilTuanyouOrder'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import MaterialList from "@/components/material/index";

// crud交由presenter持有
const defaultCrud = CRUD({ title: '团油订单', url: 'api/oilTuanyouOrder', sort: 'id,desc', crudMethod: { ...crudOilTuanyouOrder }})
const defaultForm = { id: null, unique: null, orderid: null, paysn: null, phone: null, ordertime: null, paytime: null, refundtime: null, gasname: null, province: null, city: null, county: null, gunno: null, oilno: null, amountpay: null, amountgun: null, amountdiscounts: null, orderstatusname: null, couponmoney: null, couponid: null, couponcode: null, litre: null, paytype: null, priceunit: null, priceofficial: null, pricegun: null, ordersource: null, qrcode4petrochina: null, consumerOrderId: null }
export default {
  name: 'OilTuanyouOrder',
  components: { pagination, crudOperation, rrOperation, udOperation ,MaterialList},
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  data() {
    return {

      permission: {
        add: ['admin', 'oilTuanyouOrder:add'],
        edit: ['admin', 'oilTuanyouOrder:edit'],
        del: ['admin', 'oilTuanyouOrder:del']
      },
      rules: {
        unique: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      },
      queryTypeOptions: [
        { key: 'id', display_name: 'id' },
        { key: 'unique', display_name: 'unique' },
        { key: 'orderid', display_name: '订单号' },
        { key: 'paysn', display_name: '支付号' },
        { key: 'phone', display_name: '手机号' },
        { key: 'gasname', display_name: '油站名称' },
        { key: 'province', display_name: '省' },
        { key: 'city', display_name: '市' },
        { key: 'county', display_name: '县' },
        { key: 'gunno', display_name: '枪号' },
        { key: 'oilno', display_name: '油号' },
        { key: 'amountpay', display_name: '实付金额(单位:元)' },
        { key: 'amountgun', display_name: '订单总金额(单位:元)' },
        { key: 'amountdiscounts', display_name: '优惠金额(单位:元)' },
        { key: 'orderstatusname', display_name: '订单状态' },
        { key: 'couponmoney', display_name: '优惠券金额(单位:元)' },
        { key: 'couponid', display_name: '优惠券 Id' },
        { key: 'couponcode', display_name: '优惠券 Code' },
        { key: 'litre', display_name: '升数' },
        { key: 'paytype', display_name: '支付方式' },
        { key: 'ordersource', display_name: '渠道编码,对接时团油提供' },
        { key: 'qrcode4petrochina', display_name: '需要生成二维码字段(此字段如果不为空则前端以二维码 形式展示)' },
        { key: 'consumerOrderId', display_name: '大呷卡用户消费订单ID' }
      ]
    }
  },
  watch: {
  },
  methods: {
    // 获取数据前设置好接口地址
    [CRUD.HOOK.beforeRefresh]() {
      const query = this.query
      if (query.type && query.value) {
        this.crud.params[query.type] = query.value
      }else{
        delete this.crud.params.id
        delete this.crud.params.unique
        delete this.crud.params.orderid
        delete this.crud.params.paysn
        delete this.crud.params.phone
        delete this.crud.params.gasname
        delete this.crud.params.province
        delete this.crud.params.city
        delete this.crud.params.county
        delete this.crud.params.gunno
        delete this.crud.params.oilno
        delete this.crud.params.amountpay
        delete this.crud.params.amountgun
        delete this.crud.params.amountdiscounts
        delete this.crud.params.orderstatusname
        delete this.crud.params.couponmoney
        delete this.crud.params.couponid
        delete this.crud.params.couponcode
        delete this.crud.params.litre
        delete this.crud.params.paytype
        delete this.crud.params.ordersource
        delete this.crud.params.qrcode4petrochina
        delete this.crud.params.consumerOrderId
      }
      return true
    }, // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {
    },
  }
}



</script>

<style scoped>
  .table-img {
    display: inline-block;
    text-align: center;
    background: #ccc;
    color: #fff;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    line-height: 32px;
  }
</style>
